<!--
 * @Description: 插槽最基础布局-简单来说就是画个框框
 * @author:张捉妖师
-->
<template>
  <div class="staff-manage">
    <!-- 添加删除公用组件使用 -->
    <slot name="zhactbar"></slot>
    <slot name="farmtypeselectslot"></slot>
    <div ref="commonLayout" class="common-layout">
      <!-- 搜索行 -->
      <div v-if="$slots.searchbox" class="search-box">
        <slot name="searchbox"></slot>
      </div>
      <!-- 主要区域 -->
      <div class="zhcontent">
        <!-- 其他内容 -->
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenHeight: document.body.clientHeight
    };
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val;
        this.timer = true;
        let that = this;
        // that.jisuanheight()
        setTimeout(function () {
          // 打印screenWidth变化的值
          that.jisuanheight();
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        // window.screenHeight = document.body.clientHeight
        // that.screenHeight = window.screenHeight
        that.screenHeight = document.body.clientHeight;
      })();
    };
    this.jisuanheight();
  },
  methods: {
    jisuanheight() {
      let parent = this.$refs.commonLayout;
      parent.style.setProperty("height", "100%");
      // 获取元素实际需要占据的高度
      let height = parent.scrollHeight;
      let zhactbar = this.$slots.zhactbar;
      if (!zhactbar) {
        height = height + 0;
      } else {
        height = height - 60;
      }
      parent.style.setProperty("height", height + "px");
      // 判断是否使用农场类型插槽,动态设置高度
      // let searchboxnode = this.$slots.searchbox;
      // if (searchboxnode) {
      //   parent.style.setProperty("height", height - 40 + 'px');
      // } else {
      //   parent.style.setProperty("height", height + 'px');
      // }
      this.getheight();
    },
    // 我只是单纯的想拿个高度
    getheight() {
      let parent = this.$refs.commonLayout;
      let height = parent.scrollHeight - 180;
      this.$emit("richheight", height);
    },
    // 我只是单纯拿个各宽度
    getwidth() {
      let parent = this.$refs.commonLayout;
      let width = parent.scrollWidth;
      this.$emit("richwidth", width);
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.staff-manage {
  width: 100%;
  height: 100%;
  .common-layout {
    border: 1px solid $borderColor;
    height: calc(100% - #{$actionBarHeight + 60});
    padding: 10px;
    .search-box {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .label-input {
        display: flex;
        align-items: center;
        .label {
          width: 100px;
          white-space: nowrap;
        }
      }
      .search {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          height: 30px;
        }
      }
    }
    .zhcontent {
      height: calc(100% - 50px);
      margin: 10px 0;
      position: relative;
    }
  }
}
</style>
